<template>
	<view class="index auto borderbox" @click="handerDetails(data.id)">
		<!-- 标题部分 -->
		<view class="title dflex alc pl28 jcsb">
			<view class="text">{{ data.title }}</view>
			<view
				class="circle mr34 white fs28 textc"
				v-if="data.type == 1"
				style="background: linear-gradient(180deg, #FF8964 0%, #FD4B2C 100%);"
			>
				热销中
			</view>
			<view
				class="circle mr34 white fs28 textc"
				v-if="data.type == 0"
				style="background: linear-gradient(180deg, #FFC347 0%, #FF9043 100%);"
			>
				预热中
			</view>
			<view
				class="circle mr34 white fs28 textc"
				v-if="data.type == 2"
				style="background: linear-gradient(180deg, #ECECEC 0%, #99908D 100%);"
			>
				已售罄
			</view>
		</view>
		<!-- 产品规模 -->
		<view class="mt36 dflex alc jcsb ml34 mr34">
			<view class="dflex alc">
				<view style="color: #85878E;" class="fs28 fw400">产品规模：</view>
				<view style="color: #FF6551;" class="fw600 fs28">{{ data.scale_money }}</view>
			</view>
			<view class="dflex alc">
				<view style="color: #85878E;" class="fs28 fw400">产品期限：</view>
				<view style="color: #000A1F;" class="fs28">{{ data.cycle }}</view>
			</view>
		</view>
		<!-- 年化预期收益率： -->
		<view class="mt30 dflex alc ml34 mr34 jcsb">
			<view class="dflex">
				<view style="color: #85878E" class="fs24 fw400">年化预期收益率：</view>
				<view style="color: #000A1F;" class="fs24">{{ data.yield_rate }}</view>
			</view>
			<view class="dflex fs24">
				<view style="color: #85878E">起投金额：</view>
				<view>{{ data.start_money }}</view>
			</view>
		</view>
		<!-- 年化预期收益率： -->
		<!-- lines -->
		<view class="mt30"><Lines :width="622"></Lines></view>
		<!-- 内容 -->
		<view style="width: 622rpx;line-height: 40rpx;color: #494A4F;" class="ml28 mr40 fs28 mt22 desc">
			{{ data.desc }}
		</view>
	</view>
</template>

<script setup>
const { data } = defineProps(['data']);
const emits = defineEmits(['goDetails']);
const handerDetails = id => {
	emits('goDetails', id);
};
</script>

<style lang="scss" scoped>
.index {
	width: 690rpx;
	height: 493rpx;
	background: #fff;
	box-shadow: 0rpx 18rpx 30rpx 0rpx rgba(137, 132, 165, 0.1);
	border-radius: 30px;
	.title {
		width: 690rpx;
		height: 97rpx;
		background: #fff9f6;

		border-radius: 30rpx 30rpx 0rpx 0rpx;
		.text {
			width: 461rpx;
			height: 45rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #5e2a11;
			line-height: 45rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.circle {
			// background-image: url('../../static/circle.png');
			// background-repeat: no-repeat;
			// background-size: 100% 100%;
			width: 112rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-top-left-radius: 24rpx;
			border-bottom-right-radius: 24rpx;
		}
	}
}
.desc {
	width: 622rpx;
	height: 200rpx;
	line-height: 40rpx;
	overflow: hidden;

	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}
</style>
